import React from "react"
import styled from "styled-components"
import { useNavigate } from "react-router-dom"
import { BiPowerOff } from "react-icons/bi"

export default function Logout() {
  const navigate = useNavigate()
  const handleLogout = async () => {
    localStorage.clear()
    navigate("/login")
  }

  return (
    <div>
      <Button onClick={() => handleLogout()}>
        <BiPowerOff />
      </Button>
    </div>
  )
}

const Button = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  border-radius: 5rem;
  background-color: #997af0;
  border: none;
  cursor: pointer;
  transition: 1s ease-in-out;
  &:hover {
    background-color: #4e0eff;
  }
  svg {
    font-size: 1.3rem;
    color: #ebe7ff;
  }
`
